<template>
    <div class="schedule-box">
        <h5>我的日程</h5>

        <div class="box-flex">
            <div class="content-box">
                <div class="box-content">
                    <div class="schedule-content">
                        <div class="schedule-title">
                            <i class="iconfont icon-zuojiantou"></i>
                            <div class="title-list" :class="{ 'list-active': index === activelist }"
                                v-for="(item, index) in titleList" :key="index" @click="activeList(index)">
                                <p>{{ item.week }}</p>
                                <p>{{ item.number }}</p>
                            </div>
                            <i class="iconfont icon-youjiantou1"></i>
                        </div>
                    </div>
                    <!-- <el-carousel height="200px" direction="vertical" motion-blur loop autoplay :interval="3000">
                        <el-carousel-item v-for="item in 2" :key="item"> -->
                            <el-table :data="scheduleData" height="250" style="width: 100%" class="customer-no-border-table"
                                header-row-class-name="table-row-list">
                                <el-table-column prop="client" label="客户" align="center" class-name="tableColumn"
                                    show-overflow-tooltip />
                                <el-table-column prop="contact" label="联系人" align="center" show-overflow-tooltip />
                                <el-table-column prop="description" label="工作内容" align="center" show-overflow-tooltip />
                            </el-table>
                        <!-- </el-carousel-item>
                    </el-carousel> -->
                    <div class="floor">
                        <p class="linkSee">查看更多 <i class="iconfont icon-youjiantou1"></i></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
// 我的日程
let activelist = ref(0)
// 日程日期
let titleList = ref([
    {
        week: '一',
        number: 22
    },
    {
        week: '二',
        number: 23
    },
    {
        week: '三',
        number: 24
    },
    {
        week: '四',
        number: 25
    },
    {
        week: '五',
        number: 26
    },
    {
        week: '六',
        number: 27
    },
    {
        week: '日',
        number: 28
    }
])
// 日程内容
let scheduleData = ref([
    {
        client: '河南赊店',
        contact: '赊店',
        description: '拜访客户'
    },
    {
        client: '南阳智和',
        contact: '智和',
        description: '跟进账款'
    },
    {
        client: '南阳华仁祥',
        contact: '华仁祥',
        description: '拜访客户'
    },
    {
        client: '洛阳溪泉',
        contact: '溪泉',
        description: '跟进账款'
    },
    {
        client: '五粮尖庄',
        contact: '五粮',
        description: '拜访客户'
    },
    {
        client: '新乡宝盛',
        contact: '宝盛',
        description: '跟进账款'
    }

])
// 切换星期
const activeList = (i) => {
    activelist.value = i
    switch (i) {
        case 0:
            scheduleData.value = [{
                client: '河南赊店',
                contact: '赊店',
                description: '拜访客户'
            },
            {
                client: '南阳智和',
                contact: '智和',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },
            {
                client: '新乡宝盛',
                contact: '宝盛',
                description: '跟进账款'
            }]
            break;
        case 1:
            scheduleData.value = [
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },
            {
                client: '新乡宝盛',
                contact: '宝盛',
                description: '跟进账款'
            },{
                client: '河南赊店',
                contact: '赊店',
                description: '拜访客户'
            },
            {
                client: '南阳智和',
                contact: '智和',
                description: '跟进账款'
            }
            ]
            break;
        case 2:
            scheduleData.value = [
            {
                client: '南阳智和',
                contact: '智和',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },{
                client: '河南赊店',
                contact: '赊店',
                description: '拜访客户'
            },
     
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },
            {
                client: '新乡宝盛',
                contact: '宝盛',
                description: '跟进账款'
            }]
            break;
        case 3:
            scheduleData.value = [
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },
            {
                client: '新乡宝盛',
                contact: '宝盛',
                description: '跟进账款'
            },{
                client: '河南赊店',
                contact: '赊店',
                description: '拜访客户'
            },
            {
                client: '南阳智和',
                contact: '智和',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },]
            break;
        case 4:
            scheduleData.value = [{
                client: '河南赊店',
                contact: '赊店',
                description: '拜访客户'
            },
     
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },
            {
                client: '新乡宝盛',
                contact: '宝盛',
                description: '跟进账款'
            }]
            break;
        case 5:
            scheduleData.value = [
            
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            },
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },{
                client: '河南赊店',
                contact: '赊店',
                description: '拜访客户'
            },
            {
                client: '南阳智和',
                contact: '智和',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '新乡宝盛',
                contact: '宝盛',
                description: '跟进账款'
            }]
            break;
        case 6:
            scheduleData.value = [
            {
                client: '五粮尖庄',
                contact: '五粮',
                description: '拜访客户'
            },
            {
                client: '新乡宝盛',
                contact: '宝盛',
                description: '跟进账款'
            },{
                client: '河南赊店',
                contact: '赊店',
                description: '拜访客户'
            },
            {
                client: '南阳智和',
                contact: '智和',
                description: '跟进账款'
            },
            {
                client: '南阳华仁祥',
                contact: '华仁祥',
                description: '拜访客户'
            },
            {
                client: '洛阳溪泉',
                contact: '溪泉',
                description: '跟进账款'
            }]
            break;

        default:
            break;
    }
}

</script>
<style scoped lang='scss'>
.schedule-box {
    width: 100%;
    box-sizing: border-box;

    .floor {
        width: 100%;
        text-align: right;
        height: 40px;
        line-height: 40px;
        font-weight: 500;
        font-size: 14px;
        color: #666666;
    }

    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 40px 0;

        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }

    .box-flex {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .content-box {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #FFFFFF;
            box-shadow: 2px 0px 14px 3px rgba(0, 0, 0, 0.16);
            border-radius: 4px 4px 4px 4px;
            padding-top: 20px;
            width: 100%;

            .box-content {
                width: 98%;

            }

            .schedule-content {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .schedule-title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 25px;
                    color: #333333;

                    .title-list {
                        width: 45px;
                        height: 54px;
                        background: #FFFFFF;
                        box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.16);
                        border-radius: 2px 2px 2px 2px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-between;
                        padding: 3px 0;
                    }

                    .list-active {
                        background: linear-gradient(180deg, #D1E5F6 0%, #F1F9FC 100%);
                        box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.16);
                        border-radius: 2px 2px 2px 2px;
                    }
                }
            }
        }
    }

    .table-row-list {
        :deep(.el-table__cell) {
            font-size: 28px !important;
            font-weight: bold;
        }
    }

    /*去掉表格单元格边框*/
    .customer-no-border-table {

        th,
        td,
        th.is-leaf {
            border: none;

        }

        .el-table--border,
        .el-table--group {
            border: none;
        }

        :deep(.el-table__row) {
            font-size: 12px;

            .tableColumn {
                display: flex;
                align-items: center;
                justify-content: center;

                .cell {
                    height: 26px;
                    background: #D8DFFB;
                    border-radius: 13px 13px 13px 13px;
                    color: #1947FF;
                    line-height: 26px;
                }

                .el-tooltip {
                    width: 80% !important;
                }
            }

            .el-table_1_column_2,
            .el-table_1_column_3 {
                .cell {
                    color: #FF8C14;
                }
            }
        }

    }


    .el-table__header .thead .el-table__cell {
        font-size: 14px !important;
        font-weight: bold;
    }

    .el-table--fit {
        :deep(.el-table__inner-wrapper) {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }

    /*表格最外边框*/
    .customer-no-border-table {
        border: none;

    }

    /*头部边框*/
    .customer-no-border-table thead tr th.is-leaf {
        border: 0px solid #EBEEF5;
        border-right: none;
    }

    .customer-no-border-table thead tr th:nth-last-of-type(2) {
        border-right: 0px solid #EBEEF5;
    }

    /*表格最外层边框-底部边框*/
    .customer-no-border-table .el-table--border::after,
    .customer-no-border-table .el-table--group::after {
        width: 0;
    }

    .customer-no-border-table::before {
        width: 0;
    }

    .customer-no-border-table .el-table__fixed-right::before,
    .el-table__fixed::before {
        width: 0;
    }

    .customer-no-border-table .el-table__header tr th {
        background: #fff;
        color: #333333;
        padding: 3px;
        font-weight: 550;
        height: 36px;
        border: 0px;
        font-size: 15px;
    }


}
</style>
